<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>慕课七夕主题</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      ul, li {
        list-style-type: none;
      }
      /*主体部分*/     
      #content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
      }
      .content-wrap {
        position: relative;
      }
      .content-wrap>li {
        background: #CAE1FF;
        color: red;
        float: left;
        overflow: hidden;
        position: relative;
      }
      li:nth-child(2) {
        background: #9BCD9B;
      }
      li:nth-child(3) {
        background: yellow;
      }
      button {
        width: 100px;
        height: 50px;
      }
      .button {
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div id='content'>
      <ul class='content-wrap'>
        <!-- 第一副画面 -->
        <li> 页面1 </li>
        <!-- 第二副画面 -->
        <li> 页面2 </li>
        <!-- 第三副画面 -->
        <li> 页面3 </li>
      </ul>
      <div class="button">
        <button>点击切换页面</button>
      </div>
    </div>

    <script type="text/javascript">
      var container = $("#content");
      // 获取第一个子节点
      var element = container.find(":first");
      // li页面数量
      var slides = element.find("li");
      // 获取容器尺寸
      var width = container.width();
      var height = container.height();
      // 设置li页面总宽度
      element.css({
        width: (slides.length * width) + 'px',
        height: height + 'px'
      });
      // 设置每一个页面li的宽度
      console.log(slides)
      $.each(slides, function (index) {
        // 获取到每一个li元素
        var slide = slides.eq(index);
        // 设置每一个li的尺寸
        slide.css({
          width: width + 'px',
          height: height + 'px'
        });
      });

      // 绑定一个事件，触发通过
      $('button').click(function () {
        // 在5秒的时间内，移动X的位置，为2个页面单位
        element.css({
          'transition-timing-function': 'linear',
          'transition-duration': '5000ms',          
          // 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' 
          // 设置页面X轴移动(使用ES6模板字符串)
          'transform': `translate3d(${-(width * 2)}px,0px,0px)`
        });
      });
    </script>
  </body>

</html>